<template>
  <div class="modal-header">
    <div class="modal-title"> <team-outlined />{{ l('SelectRoles') }} </div>
  </div>
  <div class="modal-body">
    <g-dynamic-table
      type="organization-unit-add-role"
      ref="table"
      class="dynamic-table"
      :fetch="fetchDataList"
      rowKey="value"
    >
    </g-dynamic-table>
  </div>
  <!-- 按钮 -->
  <div class="modal-footer">
    <a-button :disabled="saving" @click="close()">
      <close-circle-outlined />
      {{ l('Cancel') }}
    </a-button>
    <a-button :loading="saving" :type="'primary'" @click="handleSubmit()">
      <save-outlined />
      {{ l('Save') }}
    </a-button>
  </div>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import {
    OrganizationUnitServiceProxy,
    FindUsersInput,
    OrganizationUnitListDto,
    RolesToOrganizationUnitInput,
  } from '/@/shared/service-proxies';
  import { CloseCircleOutlined, SaveOutlined, TeamOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  import _ from 'lodash';

  export default defineComponent({
    name: 'add-role',
    components: {
      CloseCircleOutlined,
      SaveOutlined,
      TeamOutlined,
    },
    mixins: [ModalComponentBase],
    props: {
      organizationUnitId: Number,
    },
    data() {
      return {
        // 搜索
        filterText: '',
        _organizationUnitServiceProxy: new OrganizationUnitServiceProxy(),
        // 用户数据
        dataList: [] as OrganizationUnitListDto[],
      };
    },
    methods: {
      /**
       * 获取数据
       */
      fetchDataList() {
        const { maxResultCount, skipCount, RoleName } = (this.$refs.table as any).getSearchProps();
        let finduserInput: FindUsersInput = new FindUsersInput();
        finduserInput.organizationUnitId = this.organizationUnitId as number;
        finduserInput.maxResultCount = maxResultCount;
        finduserInput.skipCount = skipCount;
        finduserInput.filterText = RoleName;
        return new Promise((resolve, reject) => {
          this._organizationUnitServiceProxy
            .findRoles(finduserInput)
            .then((res) => {
              resolve(res);
            })
            .catch((error) => {
              reject(error);
            });
        });
      },
      /**
       * 提交表单
       */
      handleSubmit() {
        const table = this.$refs.table as any;
        const selectCount = table.getSelectRowKeys().length;
        if (selectCount <= 0) {
          this.message.warn(this.l('PleaseSelectAtLeastOneItem'));
          return;
        }
        this.saving = true;
        let input = {
          organizationUnitId: this.organizationUnitId,
          roleIds: _.map(table.getSelectRowKeys(), (selectedMember) => Number(selectedMember)),
        };
        let rolesOrganization: RolesToOrganizationUnitInput = new RolesToOrganizationUnitInput();
        rolesOrganization.init(input);
        this._organizationUnitServiceProxy
          .addRoles(rolesOrganization)
          .finally(() => {
            this.saving = false;
          })
          .then(() => {
            this.notify.success(this.l('SavedSuccessfully'));
            this.success(input.roleIds);
          });
      },
    },
  });
</script>

<style scoped lang="less">
  .modal-header,
  .modal-footer {
    margin: 0;
  }
  .modal-body {
    padding: 0;
    max-height: inherit;
    overflow: hidden;
  }
  .dynamic-table {
    padding: 0;
  }
</style>
